<template>
  <van-nav-bar title="我的" />
  <div class="box3">
    <div class="smallbox">
      <van-image
        round
        width="10rem"
        height="10rem"
        src="https://syimg.3dmgame.com/uploadimg/upload/image/20200720/20200720114315_88027.png"
      />
      <div>
        <h2>{{ user.nickname ? user.nickname : user.username }}</h2>
      </div>
    </div>
    <div class="mebox">
      <van-button block color="#ff5000" @click="edit()">个人信息</van-button>
      <van-button block color="#ff5000" @click="word()">修改密码</van-button>
      <van-button block color="#ff5000" @click="set()">系统设置</van-button>
      <van-button block color="#ff5000" @click="out()">退出登录</van-button>
    </div>
  </div>
</template>
<script>
import { inforeq, outreq } from '../../api/requies'

export default {
  methods: {
    set() {
      // eslint-disable-next-line no-undef
      showDialog({
        title: '设置',
        message: '我真是一个商店',
        theme: 'round-button'
      }).then(() => {
        // on close
      })
    },
    edit() {
      this.$router.push('/edit')
    },
    word() {
      this.$router.push('/word')
    },
    out() {
      const id = localStorage.getItem('id')
      outreq(id).then((r) => {
        console.log(r.data)
        if (r.data.code == 1) {
          localStorage.removeItem('id')
          localStorage.removeItem('token')
          // eslint-disable-next-line no-undef
          showSuccessToast(r.data.message)
          this.$router.push('/login')
        }
      })
    },
    loadlist() {
      const id = localStorage.getItem('id')
      inforeq(id).then((r) => {
        console.log(r.data)
        this.user = r.data.info
      })
    }
  },
  data() {
    return {
      user: {}
    }
  },
  mounted() {
    this.loadlist()
  }
}
</script>
<style lang="scss">
.mebox {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.box3 {
  display: flex;
  flex-flow: column;
  box-sizing: border-box;
  padding-top: 10px;
  gap: 10px;
}
.smallbox {
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
</style>
